<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    // 配置拦截器
    /*
        拦截器的作用:用于我们在网络请求的时候在发起请求或者响应时对操作就行响应的处理 
        两大拦截器   请求 响应
        4个结果     请求成功或失败  响应(即数据拿到后) 成功或失败 
    */

    // 请求拦截器 
   axios.interceptors.request.use(config => {
                // 在发送请求之前做些什么
                console.log('进入请求拦截器', config)
                return config;    //放行请求 让处理过的 数据走到.then去 
            }, error => {
                console.log("请求方向失败", error)
            });

    axios.get("https://api.apiopen.top/getJoke").then(    //axios 发挥的是一个promise对象 所以可以直接.then
        res=>{
            console.log(res)   
            }
    )

    //响应拦截器
    axios.interceptors.response.use(config => {
                // 在发送请求之前做些什么
                console.log('进入请求拦截器', config.data)  //进入请求拦截器 {code: 200, message: "成功!", result: Array(20)}
                // return config.data; 
               return config.data.result[7]                 //抛出的数据到.then中被处理了
            }, error => {
                console.log("请求方向失败", error)
            });

    axios.get("https://api.apiopen.top/getJoke").then(    //axios 发挥的是一个promise对象 所以可以直接.then
        res=>{
            console.log(res)
            }
    ) 




//发起 请求
       /*
            axios.interceptors.request.use(config => {
                // 在发送请求之前做些什么
                console.log('发送的请求为；' + config.url);
                return config;  //拦截后再抛出  为毛+拦截器？
                                //1比如说config中的一些数据不符合服务器的要求
                                //2网络请求 的一个loading动画
                                //3某些网络请求(登录token认证的时候) 必须携带一些特殊的信息
                                //对数据进行过滤,增删改查。
            }, error => {
                // 对请求错误做些什么    //一般很少来到这步
                return Promise.reject(error);
            });
       */
//响应 
        /*
            axios.interceptors.response.use(response => {
                console.log(response);
                return response;
                },error => {
                return Promise.reject(error);
            });
        */

</script>